<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>发布API</title>
    <div th:replace="include/_meta :: head"></div>
    <script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
    <script type="text/javascript" th:src="@{/lib/zTree3.5/js/jquery.ztree.all.min.js}"></script>
    <script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
    <script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
    <script type="text/javascript" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/zTree3.5/css/zTreeStyle/zTreeStyle.css}"/>
</head>
<body>
<div class="container-fluid mt-30">
    <div class="row cl">
        <div class="col-sm-11 col-sm-offset-1">
            <button onclick="window.location=ctx+'/back/'" class="btn btn-default">上一级</button>
            <button style="margin-left: 30px;" onclick="window.location=ctx" class="btn btn-default">
                前台预览
            </button>
            <button style="margin-left: 30px;" onclick="toAdd();" class="btn btn-default">添加</button>
        </div>
    </div>
    <div class="row cl">
        <div class="col-xs-12 col-sm-12">
            <TABLE id="myTable" border="0" align="left">
                <TR>
                    <TD width="20%" align="left" valign="top" style="BORDER-RIGHT: #999999 1px dashed">
                        <h3>项目接口树列表</h3>
                        <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
                    </TD>
                    <TD width="80%" align="left" valign="top">
                        <div style="padding: 50px 50px 50px 0px;">
                            <button style="margin-left: 30px;display: none" id="delItem" onclick="del();" class="btn btn-danger radius">删除</button>
                            <form style="margin-right: 30%;" class="form form-horizontal" id="form_1">
                                <input type="hidden" name="id"/>
                                <input type="hidden" id="secondNodeSelected" name="itemId"/>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>接口名称 :
                                    </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <input type="text" class="input-text" id="name" name="name" placeholder="接口名称"/>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>请求路径 :
                                    </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <input type="text" class="input-text" id="requestUrl" name="requestUrl"
                                               placeholder="请求路径"/>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>请求方式 :
                                    </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                        <span class="select-box" style="width:150px;">
                                            <select class="select" size="1" id="requestType" name="requestType">
                                                <option value="GET">GET</option>
                                                <option value="POST">POST</option>
                                                <option value="PUT">PUT</option>
                                                <option value="DELETE">DELETE</option>
                                            </select>
			                            </span>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>Request : </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                          <textarea class="textarea" id="request" placeholder="Request" name="request" height="46px;"
                                                      style="overflow: hidden" autoHeight="true"></textarea>
                                    </div>
                                </div>
                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>Response : </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                          <textarea class="textarea" id="response" placeholder="Response" name="response" height="46px;"
                                                       style="overflow: hidden;" autoHeight="true"></textarea>
                                    </div>
                                </div>

                                <div class="row cl">
                                    <label class="form-label col-xs-4 col-sm-3">其它说明 : </label>
                                    <div class="formControls col-xs-8 col-sm-9">
                                            <textarea name="descr" class="textarea" autoHeight="true" id="descr" height="46px;"
                                                      placeholder="200个字符以内" style="overflow: hidden;"
                                                      onKeyUp="$.Huitextarealength(this,200)"></textarea>
                                        <p class="textarea-numberbar"><em class="textarea-length">0</em>/200</p>
                                    </div>
                                </div>

                                <div class="row cl">
                                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                                        <input class="btn btn-success radius" type="submit"
                                               value="&nbsp;&nbsp;提交&nbsp;&nbsp;"/>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </TD>
                </TR>
            </TABLE>
        </div>
    </div>
</div>
<script type="text/javascript" th:inline="javascript">
    <!--
    $(document).ready(function () {
        var height = window.innerHeight;
        $("#myTable").css("height", height);
        $.fn.zTree.init($("#tree"), setting);
        treeObj = $.fn.zTree.getZTreeObj("tree");

        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });

        checkForm();
    });

    var treeObj;
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        },
        async: {
            enable: true,
            url: ctx + "/tree/async",
            autoParam: ["id", "level"],
            type: "get"
        },
        callback: {
            beforeClick: zTreeBeforeClick,
            onClick: zTreeOnClick
        }
    };


    function del(){
        var id = $("input[name='id']").val();
        var nodes = treeObj.getSelectedNodes();
        var pNode;
        if (nodes.length>0) {
            pNode = treeObj.getNodeByTId(nodes[0].parentTId);
        }
        $.ajax({
            type: "post",
            url: ctx+"/tree/del",
            data: {id:id},
            dataType: "text",
            async : false, //同步请求
            success: function(data){
                layer.msg('删除成功！', {icon: 1, time: 2000}, function () {
                    treeObj.reAsyncChildNodes(pNode, "refresh");
                    treeObj.selectNode(pNode);
                    $("#form_1").hide();
                    $("#delItem").hide();
                });
            },
            error:function(err){
                badMood("服务器异常，请稍后重试！");
            }
        });
    }

    function toAdd(){
        var id = $("#secondNodeSelected").val();
        if(!$.trim(id)){
            layer.alert("请先选择一个二级节点！");
        }else {
            $("input[name='id']").val("");
            clearForm();
            $(".textarea").css("height","46px");
            $("#form_1").show(800);
        }
    }
    function clearForm(){
        $(':input','#form_1','.textarea',"#requestType")
                .not(':button, :submit, :reset, :hidden,:selected')
                .val('')
                .removeAttr('checked')
                .removeAttr('selected');
    }


    function zTreeBeforeClick(treeId, treeNode, clickFlag) {
        return true;
    }

    function zTreeOnClick(event, treeId, treeNode) {
        $("#secondNodeSelected").val("");
        var level = treeNode.level;
        var id = treeNode.id;
        var tId = treeNode.tId;

        if (level==1){//二级节点
            $("#secondNodeSelected").val(id);
            $("input[name='id']").val("");
            clearForm();
            $(".textarea").css("height","46px");
            $("#delItem").hide();
            $("#form_1").show(800);
        }else if(level==2){//三级节点
            $("#delItem").show(800);
            $("#form_1").show(800);
            $.ajax({
                type: "post",
                url: ctx+"/getOne",
                data: {id:id,tId:tId},
                dataType: "text",
                async : false, //同步请求
                success: function(data){
                    clearForm();
                    $("input[name='id']").val(id);
                    $(".textarea").css("height","46px");

                    var one = $.parseJSON(data);

                    var requestType = one.requestType;
                    $("#requestType").find("option").each(function(){
                        var temp = $(this).val();
                        if (temp==requestType){
                            $(this).attr("selected",true);
                        }else {
                            $(this).removeAttr("selected");
                        }
                    });

                    $("#name").val(one.name);
                    $("#requestUrl").val(one.requestUrl);
                    $("#request").val(one.request);
                    $("#response").val(one.response);
                    $("#descr").val(one.descr);
                },
                error:function(err){
                    badMood("服务器异常，请稍后重试！");
                }
            });
        }
    }


    function checkForm() {
        $("#form_1").validate({
            rules: {
                name: {
                    required: true
                },
                requestUrl: {
                    required: true
                },
                request: {
                    required: true
                },
                response: {
                    required: true
                }
            },
            onkeyup: false,
            focusCleanup: true,
            success: "valid",
            submitHandler: function (form) {
                $(form).ajaxSubmit({
                    type: 'post',
                    url: ctx + "/tree/add",
                    success: function (data) {
                        var dataId = $("input[name='id']").val();
                        if ($.trim(dataId)){
                            layer.msg('修改成功！', {icon: 1, time: 2000}, function () {
                                /*var nodes = treeObj.getSelectedNodes();
                                if (nodes.length>0) {
                                    var node = treeObj.getNodeByTId(nodes[0].parentTId);
                                    treeObj.reAsyncChildNodes(node, "refresh");
                                    treeObj.selectNode(nodes[0]);
                                }*/
                            });
                        }else {
                            layer.msg('保存成功，可以继续在本页面添加！', {icon: 1, time: 2000}, function () {
                                var id = $("#secondNodeSelected").val();
                                clearForm();
                                $("#secondNodeSelected").val(id);
                                var nodes = treeObj.getSelectedNodes();
                                if (nodes.length>0) {
                                    treeObj.reAsyncChildNodes(nodes[0], "refresh");//刷新当前选中的节点
                                }
                            });
                        }
                    },
                    error: function (XmlHttpRequest, textStatus, errorThrown) {
                        var errorJson = $.parseJSON(XmlHttpRequest.responseText);
                        var message = "操作失败，" + errorJson.message;
                        layer.msg(message, {icon: 2, time: 2000});
                    }
                });

            }
        });
    }
    $.fn.autoHeight = function(){
        function autoHeight(elem){
            elem.style.height = 'auto';
            elem.scrollTop = 0; //防抖动
            elem.style.height = elem.scrollHeight + 'px';
        }
        this.each(function(){
            autoHeight(this);
            $(this).on('focus', function(){
                autoHeight(this);
            });
            $(this).on('keyup', function(){
                autoHeight(this);
            });
        });
    }
    $('textarea[autoHeight]').autoHeight();
    //-->
</script>
</body>
</html>